<template>
  <div class="eventSearch">
    <el-form
      :inline="true"
      :model="formData"
      class="demo-form-inline"
      ref="formData"
      style="width: 100%"
    >
      <el-form-item v-permission="['editor']">
        <el-select
          v-model="formData.game_id"
          filterable
          placeholder="输入关联游戏"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.gameName"
            :value="item.id"
            style="width: 300px"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-permission="['admin']">
        <el-select
          v-model="cp_id"
          filterable
          placeholder="输入CP"
          @change="changeCp"
        >
          <el-option
            v-for="item in cpoptions"
            :key="item.id"
            :label="item.company_name"
            :value="item.id"
            style="width: 300px"
          ></el-option>
        </el-select>
        <el-select
          v-model="formData.game_id"
          filterable
          placeholder="输入关联游戏"
          clearable
        >
          <el-option
            v-for="item in gameoption"
            :key="item.game_id"
            :label="item.name"
            :value="item.game_id"
            style="width: 300px"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formData.status" filterable placeholder="发布状态">
          <el-option
            v-for="item in pushOptions"
            :key="item.id"
            :label="item.label"
            :value="item.id"
            style="width: 130px"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formData.state" filterable placeholder="活动状态">
          <el-option
            v-for="item in statusOptions"
            :key="item.id"
            :label="item.label"
            :value="item.id"
            style="width: 130px"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="formData.type" filterable placeholder="活动类型">
          <el-option
            v-for="item in eventType"
            :key="item.id"
            :label="item.label"
            :value="item.id"
            style="width: 130px"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <div style="display: inline-block">
          <el-date-picker
            v-model="formData.start_time"
            type="date"
            placeholder="活动开始时间"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
        <div style="display: inline-block; margin: 0 2px">-</div>
        <div style="display: inline-block">
          <el-date-picker
            v-model="formData.end_time"
            type="date"
            placeholder="活动结束时间"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="dataSearch"
          @click="dataSearch(formData)"
          >搜索</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button class="addNewgame" type="primary" @click="addActivity()"
          >添加活动</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { mapGetters } from "vuex";

import { getAndroidList } from "@/api/gameManage";
import { getCpList, getGameList } from "@/api/eventManage";
export default {
  data() {
    return {
      formData: {
        game_id: "",
        state: "",
        status: "",
        start_time: "",
        end_time: "",
        type: "",
        page: 1,
        limit: 20,
      },
      cp_id: "",
      options: [],
      eventType: [
        {
          id: 0,
          label: "全部",
        },
        {
          id: 1,
          label: "单日累充",
        },
        {
          id: 2,
          label: "多日累充",
        },
        {
          id: 3,
          label: "单笔充值",
        },
        {
          id: 4,
          label: "高额返利",
        },
        {
          id: 5,
          label: "其他类型",
        },
      ],
      pushOptions: [
        {
          id: 0,
          label: "全部",
        },
        {
          id: 1,
          label: "待上线",
        },
        {
          id: 2,
          label: "已上线",
        },
        {
          id: 3,
          label: "已下线",
        },
      ],
      statusOptions: [
        {
          id: 0,
          label: "全部",
        },
        {
          id: 1,
          label: "进行中",
        },
        {
          id: 2,
          label: "已结束",
        },
        {
          id: 3,
          label: "未开始",
        },
      ],
      loading: false,
      cpoptions: [],
      gameoption:[]

    };
  },
  directives: { permission },
  mounted() {
    if (this.$store.getters.roles[0] == "admin") {
      getCpList().then((res) => {
        this.cpoptions = res.data;
      });
    } else {
      getAndroidList().then((res) => {
        this.options = res.data.list;
      });
    }
  },
  methods: {
    // 查询
    dataSearch() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          const obj = Object.assign({}, this.formData);
          this.$emit("searchList", obj);
        }
      });
    },
    addActivity() {
      this.$emit("showaddEventDialog");
    },
    changeCp(value) {
      const para = Object.assign({}, { cp_id: value });
      getGameList(para).then((res) => {
        this.gameoption=res.data;
      });
      
    },
  },
};
</script>
<style lang="scss" scoped>
.eventSearch {
  width: 55%;
  margin-left: 20px;
}
.el-form-item {
  margin-bottom: 0;
}
.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}
.addNewgame,
.dataSearch {
  padding: 0 15px;
  height: 30px;
  font-size: 13px;
}

.el-select-dropdown__item {
  white-space: normal;
  height: auto;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 250px;
}
</style>